<template>
    <div>
      <p>age: {{ age }}</p>
      <el-button
        type="success" 
        @click="addNum" 
        >点击替换</el-button>
    </div>
  </template>
  <script setup lang="ts">
  import { ref, reactive, computed, watch } from 'vue'
  
  console.log('vue5')
  interface Paren {
    name: string
    age: number
  }
  // 响应式变量
  const msg = ref<Paren>(
    reactive({
      name: 'string',
      age: 1
  }))
  msg.value.name
  
  
  // 响应式对象
  const str = reactive({
    name: 123,
    value: '张三'
  })
  
  
  // 向对象添加新属性
  // str['value'] = 20
  // str.value = 20
  
  // 声明与访问
  const age = ref(123)
  console.log(age.value)
  
  // 计算属性
  const addNum = computed(() => {
    age.value * 2
  })
  
  // watch
  watch(age, (oldValue: number, newValue: number) => {
    console.log(oldValue, newValue)
  })
  
  // Vue2实现数据双向绑定的方法
  function defineReactive(obj: object, key: any, val: any) {
    Object.defineProperty(obj, key, {
      get() {
        console.log(`读取了${key}属性`)
        // oldobj === newobj ?
        return val
      },
      set(newVal) {
        console.log(`设置了${key}属性为${newVal}`)
        val = newVal
      }
    })
  }
  // Vue3实现数据双向绑定的方法
  const reactiveObj = new Proxy(obj, {
    get(target, key, receiver) {
      console.log(`读取了${String(key)}属性`)
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      console.log(`设置了${String(key)}属性为${value}`)
      return Reflect.set(target, key, value, receiver)
    }
  })
  
  
  
  
  
  
  
  
  
  
  
  
  
  </script>
  <style>
    
  </style>